<template>
  <div class="box">
    <h1 ref="title">App</h1>
    <Item ref="item" />
    <button @click="$refs.item.message = 'hello world!!!!!'">修改</button>
    <hr />
  </div>
</template>

<script>
  import Item from "./components/Item.vue";

  export default {
    name: "App",
    components: {
      Item,
    },
    data() {
      return {};
    },
    mounted() {
      //我们可以在this.$refs对象上看到所有的ref的引用
      //如果ref设置给了html元素,则ref引用指向的是这个DOM的真实节点(我们尽量不直接操作DOM,除非在无法使用vue的时候,再去使用)
      console.log(this.$refs); //title , item

      this.$refs.title.style.color = "pink";

      //如果ref设置给了组件,则ref引用指向的是这个组件实例(这也是组件通信的一种方式,因为我们在父组件可以拿到子组件的数据)
      console.log(this.$refs.item);
    },
  };
</script>

<style></style>
